<template>
	<view class="">
		<u-navbar :isBack="false" :background="{ background: '#2f9e25' }">
			<view solt="left" class="left-view flex-row items-center">
				<view class="left-text">xxx</view>
			</view>
		</u-navbar>
		<view class="" style="position: relative;">
			<view class="top-bg"></view>
			<view class="top-con">
				<view class="flex-row items-center justify-between " style="padding:20rpx 20rpx 0 20rpx;">
					<view class="flex-row items-center top-city-con">
						<view class="top-city flex-row items-center" @click="navTo('/pages/public/city')">
							<text class="clamp"
								style="font-size: 24rpx;margin-right:8rpx;max-width: 100rpx;">{{ city }}</text>
							<u-icon name="arrow-down-fill" size="20"></u-icon>
						</view>
						<view class="" @click="navTo('/pages/search/index')">
							<u-search :showAction="false" :disabled="true" bgColor="#F4F6F8"
								placeholder="搜索附 近充电站"></u-search>
						</view>
					</view>
					<view class="flex-col justify-center items-center" @click="changeStore">
						<view class="" v-if="callType == 'map'"><u-icon name="/static/img/lb.png" size="30"
								color="#246697"></u-icon></view>
						<view class="" v-else><u-icon name="/static/img/dt.png" size="30" color="#246697"></u-icon>
						</view>

						<text style="color: #246697;font-size: 22rpx;">{{ callType == 'map' ? '列表模式' : '地图模式' }}</text>
					</view>
				</view>
				<view class="flex-row items-center justify-between" style="padding-top: 14rpx;">
					<u-dropdown class="fill" titleSize="24" active-color="#246697" menuIconSize="18">
						<u-dropdown-item v-model="distanceSearch" title="距离" :options="options1"
							@change="dropdownChange"></u-dropdown-item>
						<u-dropdown-item v-model="type" title="充电桩类型" :options="options2"
							@change="dropdownChange"></u-dropdown-item>
						<u-dropdown-item v-model="lable" title="偏好">
							<view class="slot-content" style="background-color: #FFFFFF;padding: 10rpx 0;">
								<scroll-view scroll-y="true" style="max-height:400rpx;">
									<u-checkbox-group @change="checkboxGroupChange" :wrap="true" icon-size="28"
										size="44">
										<u-checkbox v-for="(item, index) in tagList" :key="index" activeColor="#246697"
											v-model="item.checked" :name="item.content">
											{{ item.content }}
										</u-checkbox>
									</u-checkbox-group>
								</scroll-view>
							</view>
						</u-dropdown-item>
					</u-dropdown>
				</view>
			</view>
		</view>
		<template v-if="callType == 'map'">
			<view class="map-con" :style="{ top: top + 'px' }">
				<map id="map" class="map" :longitude="point.longitude" :show-location="true" :latitude="point.latitude"
					:scale="scale" :markers="markers" @markertap="onMapMarkerClick" @callouttap="onMapMarkerClick"
					@regionchange="handleMapChange">
					
					<cover-view slot="callout" class="bubble-box">
						<cover-view 
						style="display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						position: relative;
						width: 244rpx;
						height: 108rpx;
						border-radius: 15rpx;
						background-color: #fff;
						padding: 0 10rpx;" 
						v-for="item in markers" :key="item.id" :marker-id="item.id">
							<cover-view  
							style="width: 66rpx;height: 66rpx;">
								<cover-image 
								style="width: 66rpx;
								height: 66rpx;" 
								src="../../static/img/cart-2.png" 
								mode=""
								v-if="item.field2 == 1"></cover-image>
								
								<cover-image 
								style="width: 66rpx;
								height: 66rpx;" 
								src="../../static/img/cart-1.png" 
								mode=""
								v-else></cover-image>
							</cover-view>
							<cover-view 
							style="width: 160rpx;padding-right: 10rpx;margin-left: 10rpx;">
								<cover-view 
								style="
								font-size: 24rpx;
								font-weight: 500;
								color: #FD4E3C;
								padding-right: 10rpx;">
									<cover-view>
										￥{{item.price || 0}}
									</cover-view>
								</cover-view>
								
								<cover-view 
								v-if="item.field2 == 1"
								style="font-weight: bold;
								font-size: 24rpx;color: #298DFF;">
									{{item.unused}}空闲
								</cover-view>
								<cover-view 
								style="
								font-weight: bold; 
								display: flex;
								align-items: center;
								flex-direction: row;
								justify-content: space-between;"
								v-else>
									<cover-view 
									style="width: 70rpx;
									font-size: 24rpx;
									color: #666666;
									padding-right: 15rpx;
									white-space: pre-line;
									word-break: break-all;
									word-wrap:break-word;">
										快{{item.unused || 0}}
									</cover-view>
									<cover-view style="
									min-width: 50rpx;
									font-size: 24rpx;
									color: #298DFF;
									white-space: pre-line;
									word-break: break-all;
									word-wrap:break-word;">慢{{item.unusedSlowly || 0}}</cover-view>
								</cover-view>
								
							</cover-view>
						</cover-view>
					</cover-view>
				</map>
				<view class="bottom-left flex-col items-center">
					<view class="bottom-left-icon" @click="getScale">
						<image src="/static/img/dingwei.png" mode="" class="bottom-left-icon"></image>
					</view>
					<view class="bottom-left-icon" @click="navTo('/pages/myself/store')">
						<image src="/static/img/shoucang.png" mode="" class="bottom-left-icon"></image>
					</view>
				</view>
			</view>
			<view class="bottom-con" v-if="show">
				<view class="item-top flex-row items-center justify-between">
					<view class="close-icon" @click="show = false"><u-icon name="close-circle" size="34"
							color="#ccc"></u-icon></view>
					<view class="flex-col" style="max-width:80%;"
						@click="handleBottom">
						<view class="flex-row items-center">
							<image v-if="currentItem.field2 == 1" src="/static/img/cart-icon-2.png" mode="" class="bottom-icon"></image>
							<image v-else src="/static/img/cart-icon.png" mode="" class="bottom-icon"></image>
							<view class="item-title clamp" style="max-width:100%;">{{ currentItem.name }}</view>
						</view>
						<view class="item-d clamp2">{{ currentItem.address }}</view>
					</view>
					<view class="flex-col items-center justify-center">
						<image src="/static/img/daohang.png" mode="" class="icon" @click="openMap(currentItem)"></image>
						<text class="bottom-text" style="margin-top: 10rpx;">{{ currentItem.distance }}KM</text>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="" style="padding: 30rpx;padding-bottom: 150rpx;" v-if="dataList.length != 0 && loaded">
				<item :list="dataList"></item>
			</view>
			<u-empty src="/static/empty.png" marginTop="200" iconSize="200" text="没有数据哦 ^_^" v-else></u-empty>
		</template>
		<u-popup v-model="showAd" mode="center" :closeable="true">
			<image :src="pic" mode="" class="adImg"></image>
		</u-popup>
		<mix-loading v-if="isLoading"></mix-loading>
		<tabbar isPages="1"></tabbar>
	</view>
</template>

<script>
	import item from '@/components/page-item-list/item.vue';
	export default {
		components: {
			item
		},
		data() {
			return {
				pageNo: 1,
				totalPage: 1,
				show: false,
				type: '', //   充电桩类型
				distanceSearch: '', //  距离
				lable: '', //  标签
				top: uni.getSystemInfoSync().statusBarHeight + 134,
				point: {},
				city: '北京市',
				markers: [],
				callType: 'map',
				scale: 14,
				dataList: [],
				currentItem: {},
				options1: [{
						label: '3km',
						value: '3km'
					},
					{
						label: '10km',
						value: '10km'
					},
					{
						label: '50km',
						value: '50km'
					},
					{
						label: '不限',
						value: ''
					}
				],
				options2: [{
					label: '全部',
					value: ''
				},{
					label: '汽车快充',
					value: '0'
				},{
					label: '汽车慢充',
					value: '1'
				},{
					label: '电动车',
					value: '2'
				}],
				tagList: [],
				pic: '',
				showAd: false
			};
		},
		onLoad() {
			uni.hideTabBar()
			this.getPoint();
			this.loadTag();
		},
		onReachBottom() {
			this.totalPage > this.pageNo ? (this.pageNo++, this.loadData(this.point)) : '';
		},
		methods: {
			async getSysPic() {
				const res = await this.$request('content/pic', {
					type: 3
				});
				if (res.result == 0) {
					if (res.data.pic) {
						this.pic = res.data.pic;
						this.showAd = true;
					}
				} else {
					this.$util.msg(res.resultNote);
				}
			},
			async loadTag() {
				const res = await this.$request('recharge/label-list', {});
				if (res.result == 0) {
					this.tagList = res.data;
				} else {
					this.$util.msg(res.resultNote);
				}
			},
			handleMapChange(e){
				if(e.detail.type == 'end'){
					this.$util.debounce(()=>{
						let map = uni.createMapContext('map',this);
						map.getCenterLocation({
							success: (res) => {
								console.log(res);
								this.loadData(res)
							}
						},900)
					})
				}
			},
			handleBottom(){
				if(this.currentItem.field2 == 1) return
				this.navTo(`/pages/tabs/details?id=${this.currentItem.id}`, { login: true })
			},
			set(city) {
				this.city = city;
				this.loadData(this.point);
			},
			changeStore() {
				this.callType == 'map' ? (this.callType = 'list') : (this.callType = 'map');
			},
			dropdownChange() {
				this.loadData(this.point);
			},
			checkboxGroupChange(e) {
				console.log(e);
				this.lable = e.join(',');
				this.pageNo = 1;
				this.loadData(this.point);
			},
			onMapMarkerClick(e) {
				console.log(e);
				let index = e.detail.markerId;
				this.currentItem = this.dataList[index];
				this.show = true;
			},
			initMapMarker() {
				this.markers = [];
				this.dataList.forEach((item, index) => {
					let marker = {
						id: index,
						latitude: item.latitude,
						longitude: item.longitude,
						address: item.address,
						field2: item.field2,
						price: item.price,
						unused: item.unused,
						unusedSlowly: item.unusedSlowly,
						iconPath: '/static/chong.png',
						width: 20,
						height: 20,
						customCallout: {
							display: 'ALWAYS'
						}
					};
					this.markers.push(marker);
				});
			},
			getScale() {
				var map = uni.createMapContext('map',this)
				var _this = this
				map.moveToLocation({
					longitude:_this.point.longitude,
					latitude:_this.point.latitude,
				})
			},
			getPoint() {
				let _this = this;
				if (_this.isReady) {
					_this.$util.msg('请稍后重新定位!');
					return;
				}
				_this.isReady = true;
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						_this.point.longitude = res.longitude;
						_this.point.latitude = res.latitude;
						uni.request({
							url:'https://restapi.amap.com/v3/geocode/regeo?parameters',
							method:"GET",
							data:{
								key:_this.mapKey,
								location: res.longitude * 1 + ',' + res.latitude * 1,
							},
							success(options) {
								console.log(options);
								if(options.data.status == '1'){
									_this.city = options.data.regeocode.addressComponent.city;
									uni.setStorageSync('city',_this.city)
									_this.loadData(_this.point);
								}
							}
						})
					},
					fail(err) {
						console.log(err);
						_this.$util.msg('你拒绝定位，不能获取准确信息!');
						_this.city = '北京市';
						_this.point.longitude = '116.40';
						_this.point.latitude = '39.90';
						_this.loadData(_this.point);
					},
					complete() {
						uni.setStorageSync('point', _this.point);
					}
				});
				setTimeout(() => {
					_this.isReady = false;
				}, 10000);
			},
			async loadData(point) {
				const data = {
					uid: uni.getStorageSync('uid'),
					longitude: this.point.longitude,
					latitude: this.point.latitude,
					longitude1: point.longitude,
					latitude1: point.latitude,
					pageNo: this.pageNo,
					pageSize: '15',
					key: this.key,
					lable: this.lable,
					type: this.type,
					city: this.city,
					distanceSearch: this.distanceSearch
				};
				if (this.pageNo == 1) this.dataList = [];
				const res = await this.$request('recharge/list', data, {
					showLoading: true
				});
				if (res.result == 0) {
					this.dataList = this.dataList.concat(res.data.list);
					// this.totalPage = Math.ceil(res.data.count / 10);
					if (this.callType == 'map') this.initMapMarker();
				} else {
					this.$util.msg(res.resultNote);
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	.adImg {
		width: 600rpx;
		height: 600rpx;
	}

	.panel {
		background: #ffffff;
		padding: 20rpx;
		border-radius: 15rpx;
		position: relative;
		width: 190rpx;
		height: 103rpx;
	}

	.cal-top {
		font-size: 24rpx;
		font-weight: bold;
		color: #000000;
	}

	.cal-price {
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
	}

	.cal-k {
		font-size: 22rpx;
		font-weight: 500;
		color: #cbaf00;
	}

	.cal-m {
		font-size: 22rpx;
		font-weight: 500;
		color: #246697;
	}

	.left-icon {
		width: 44rpx;
		height: 44rpx;
		margin: 0 22rpx;
	}

	.left-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		margin-left: 50rpx;
	}

	.top-bg {
		width: 750rpx;
		height: 90px;
		background: $uni-color-bg;
		position: relative;
		margin-bottom: 32rpx;
	}

	.top-con {
		width: 700rpx;
		// height: 187rpx;
		background: #ffffff;
		box-shadow: 0px 5rpx 30rpx 0px rgba(112, 112, 112, 0.13);
		border-radius: 20rpx;
		position: absolute;
		left: 25rpx;
		top: 50rpx;
		z-index: 44;
		// padding: 20rpx;
	}

	.top-city-con {
		width: 549rpx;
		height: 73rpx;
		background: #f4f6f8;
		border-radius: 10rpx;
	}

	.top-city {
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
		padding: 0 10rpx;
		position: relative;
	}

	.top-city::after {
		content: '';
		width: 2rpx;
		height: 22rpx;
		background: #dbdcdf;
		margin-left: 10rpx;
	}

	.clas-type {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-right: 10rpx;
	}

	.map-con {
		position: absolute;
		bottom: 57px;
		width: 100%;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	.bottom-con {
		position: fixed;
		left: 0;
		bottom: 180rpx;
		width: 100%;
		padding: 30rpx;
		z-index: 99;
	}

	.close-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}

	.item-top {
		padding: 60rpx 30rpx;
		background: #ffffff;
		border-radius: 30rpx;
		position: relative;
	}

	.item-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
	}

	.item-d {
		font-size: 24rpx;
		font-weight: 500;
		color: #a9a9a9;
		padding-top: 30rpx;
	}

	.p-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.icon {
		width: 58rpx;
		height: 58rpx;
	}

	.bottom-icon {
		width: 38rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.bottom-left {
		position: fixed;
		bottom: 240rpx;
		left: 20rpx;
		width: 100rpx;
		z-index: 9;
	}

	.bottom-left-icon {
		width: 72rpx;
		height: 72rpx;
		margin-bottom: 20rpx;
	}
	
</style>